import React, { Component } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'

export default class List extends Component {
  render () {
    const { list, active, handleDelete,handleZan } = this.props
    const tempList = [...list]
    // 当active等于hot 根据热度(id)排序，等于time根据时间排序
    if (active === 'hot') {
      //item1,item2表示tempList里面的对象
      tempList.sort((item1, item2) => item1.id - item2.id)
    } else {
      tempList.sort((item1, item2) => item2.time - item1.time)
    }
    return (
      <div className='comment-list'>
        {/* 排序时，一定要换成 tempList */}
        {tempList.length === 0 ? <h3>暂无评论</h3> : tempList.map((item) => (
          <div key={item.id} className='list-item'>
            <div className='user-face'>
              <img
                className='user-head'
                src={item.img}
                alt=''
              />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>{dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                {/* <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}> */}
                <span className={classNames('like', {
                  liked: item.attitude === 1,
                })}
                onClick={() => handleZan(item.id,item.attitude === 1? 0 : 1)}
                >
                  <i className='icon'></i>
                </span>
                {/* <span className={`hate ${item.attitude === -1 ? 'hate' : ''}`}> */}
                <span className={classNames('hate',{
                  hated:item.attitude === -1
                })}
                onClick={() => handleZan(item.id,item.attitude === -1? 0 : -1)}>
                  <i className='icon'></i>
                </span>
                <span className='reply btn-hover'
                  onClick={() => handleDelete(item.id)}>删除</span>
              </div>
            </div>
          </div>
        ))}
        


      </div >
    )
  }
}